<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link href="css/secondpage_style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.8.1.min.js"></script>
    <title></title>

</head>
<body>
<div class="smart-green">

    <form>
        <h1>害虫发生程度分类模型</h1>
        <label>
            <span>降雨量：</span>
            <input id="rainfall" type="text" name="降雨量" placeholder="例如：0" />
        </label>

        <label>
            <span>叶面温湿度：</span>
            <input id="leaf" type="text" name="叶面温湿度" placeholder="例如：0" />
        </label>
        <label>
            <span>土壤温湿度：</span>
            <input id="soil" type="text" name="叶面温湿度" placeholder="例如：23.1" />
        </label>
        <label>
            <span>相对湿度：</span>
            <input id="relative" type="text"name="叶面温湿度" placeholder="例如：83" />
        </label>
        <label>
            <span>CO2浓度：</span>
            <input id="co2" type="text" name="叶面温湿度" placeholder="例如：22" />
        </label>

        <label>
            <span>&nbsp;</span>
            <input type="button" class="button" value="预测" onclick="dialog()"/>
        </label>
    </form>

    <div class="result">
        <p>此种环境条件下的害虫发生程度为<i></i>级!</p>
    </div>

</div>


<script type="text/javascript">
    function dialog() {
        var showResult = document.getElementsByClassName('result')[0];
        showResult.style.display = 'block';
        var num = Math.ceil(Math.random() * 3);
//        console.log(num);
        $(".result p i").html(num);
    }


</script>



</body>

</html>